<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>开发部项目管理 - 项目总览</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 所有页面保持相同的导航栏结构 -->

    <div class="container">
        <header>
            <h1>开发部项目管理</h1>
            <div class="user-info">
                <span id="username-display">部长</span>
                个人信息
            </div>
        </header>

        <nav class="sidebar">
            <ul>
                <a href=""><li class="active">项目总览</li></a>
                <a href="project-detal.html"> <li>基本信息文档列表</li></a>
               <a href="project-info.html"> <li>成员信息进度跟踪</li></a>
            </ul>
        </nav>

        <main class="content">
            <div class="search-bar">
                <input type="text" id="searchInput" placeholder="搜索项目..." onkeyup="filterProjects()">
                <button onclick="filterProjects()">搜索</button>
            </div>

            <div class="project-table">
                <table>
                    <thead>
                        <tr>
                            <th>项目ID</th>
                            <th>项目名称</th>
                            <th>项目负责人</th>
                            <th>状态</th>
                            <th>项目进度(%)</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="projectsTableBody">
                        <tr>
                            <td colspan="6" style="text-align: center; padding: 20px;">
                                正在加载项目列表...
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </main>
    </div>

    <script src="main.js"></script>
    <script>
        // 全局变量存储项目数据
        let allProjects = [];
        let filteredProjects = [];

        // 检查登录状态
        function checkAuth() {
            const token = localStorage.getItem('authToken');
            const userInfo = localStorage.getItem('userInfo');
            
            if (!token || !userInfo) {
                window.location.href = 'login.html';
                return;
            }
            
            try {
                const user = JSON.parse(userInfo);
                document.getElementById('username-display').textContent = user.username;
            } catch (error) {
                console.error('解析用户信息失败:', error);
                window.location.href = 'login.html';
            }
        }

        // 获取项目列表
        async function loadProjects() {
            const token = localStorage.getItem('authToken');
            
            try {
                const response = await fetch('/projects', {
                    method: 'GET',
                    headers: {
                        'Authorization': `Bearer ${token}`
                    }
                });
                
                const data = await response.json();
                
                if (data.code === 200) {
                    allProjects = data.data;
                    filteredProjects = [...allProjects];
                    displayProjects();
                } else {
                    showError(data.message);
                }
            } catch (error) {
                showError('网络错误，请重试');
                console.error('获取项目列表失败:', error);
            }
        }

        // 显示项目列表
        function displayProjects() {
            const tbody = document.getElementById('projectsTableBody');
            
            if (filteredProjects.length === 0) {
                tbody.innerHTML = `
                    <tr>
                        <td colspan="6" style="text-align: center; padding: 20px;">
                            暂无项目数据
                        </td>
                    </tr>
                `;
                return;
            }
            
            tbody.innerHTML = filteredProjects.map(project => `
                <tr>
                    <td>${project.id}</td>
                    <td>${project.name}</td>
                    <td>${project.pm_name}</td>
                    <td>
                        <span class="status-badge status-${project.status}">
                            ${getStatusName(project.status)}
                        </span>
                    </td>
                    <td>
                        <div class="progress-bar" style="width: ${project.progress}%">
                            ${project.progress}%
                        </div>
                    </td>
                    <td>
                        <button onclick="viewProject(${project.id})" class="btn-view">查看</button>
                        <a href="${project.git_url}" target="_blank" class="btn-git">代码</a>
                    </td>
                </tr>
            `).join('');
        }

        // 获取状态名称
        function getStatusName(status) {
            const statusNames = {
                'active': '进行中',
                'completed': '已完成',
                'paused': '已暂停'
            };
            return statusNames[status] || status;
        }

        // 过滤项目
        function filterProjects() {
            const searchTerm = document.getElementById('searchInput').value.toLowerCase();
            
            if (searchTerm === '') {
                filteredProjects = [...allProjects];
            } else {
                filteredProjects = allProjects.filter(project => 
                    project.name.toLowerCase().includes(searchTerm) ||
                    project.pm_name.toLowerCase().includes(searchTerm) ||
                    project.description.toLowerCase().includes(searchTerm)
                );
            }
            
            displayProjects();
        }

        // 查看项目详情
        function viewProject(projectId) {
            alert(`查看项目 ${projectId} 的详细信息`);
            // 这里可以跳转到项目详情页面
        }

        // 显示错误信息
        function showError(message) {
            const tbody = document.getElementById('projectsTableBody');
            tbody.innerHTML = `
                <tr>
                    <td colspan="6" style="text-align: center; padding: 20px; color: #721c24; background-color: #f8d7da;">
                        错误: ${message}
                    </td>
                </tr>
            `;
        }

        // 页面加载时执行
        document.addEventListener('DOMContentLoaded', function() {
            checkAuth();
            loadProjects();
        });
    </script>
</body>
</html>
        